<template>
  <div>
    <el-select
      v-model="selValue"
      filterable
      :clearable="true"
      placeholder="请选择"
      @change="changeCategory"
    >
      <el-option label="" value="">全部</el-option>
      <el-option
        :key="item.id"
        :label="item.name"
        :value="item.id"
        v-for="item in categoryList"
      >
      </el-option>
    </el-select>
    <el-table :data="articleList" style="width: 100%" :stripe="true">
      <el-table-column label="编号" prop="id" width="100"> </el-table-column>
      <el-table-column label="文章标题" prop="title"> </el-table-column>
      <el-table-column label="所属栏目">
        <template slot-scope="scope">
          <span v-for="(item, index) in scope.row.categories" :key="index">
            &nbsp;{{ item.name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="缩略图" width="200">
        <!-- 作用域插槽, 可以讲子组件里面的数据, 反过来传递给这里的插槽内容 -->
        <!-- 数据其实都在子组件内部, 但是我们不会直接进入内部操作, 所以需要内部将数据返回出来供我们使用
        技术名字叫做作用域插槽 -->
        <template slot-scope="scope">
          <img
            class="article_cover"
            :src="scope.row.cover[0].url | fixImgUrl"
            alt=""
            v-if="scope.row.cover.length > 0"
          />
          <!-- <img class="article_cover" src="../assets/logo.png" alt="" v-else /> -->
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="评论量"
        prop="comment_length"
        width="200"
      ></el-table-column>
      <el-table-column label="发布人" prop="user.nickname"> </el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input size="mini" placeholder="输入关键字搜索" />
        </template>

        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="$router.push('editArticleList?articleId=' + scope.row.id)"
          >
            编辑
          </el-button>
          <el-button size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      layout="prev, pager, next,jumper,sizes"
      :total="total"
      :page-sizes="[2, 5, 10, 20]"
      @current-change="changePage"
      @size-change="changeSize"
      :page-size="pageSize"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: 5,
      articleList: [],
      categoryList: [],
      selValue: "",
      total: 0,
    };
  },
  methods: {
    loadList(categoryId) {
      this.$axios({
        url: "/post",
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          category: categoryId,
        },
      }).then((res) => {
        console.log(res);
        this.total = res.data.total;
        this.articleList = res.data.data;
      });
    },
    // 点击翻页
    changePage(currentPage) {
      this.pageIndex = currentPage;
      this.loadList();
    },
    // 选择每页显示的条数
    changeSize(currentSize) {
      console.log(currentSize);
      this.pageSize = currentSize;
      this.loadList();
    },
    // 通过选择栏目来进行筛选
    changeCategory(value) {
      console.log(value);
      this.pageIndex = 1;
      this.loadList(value);
    },
  },

  created() {
    this.loadList();

    this.$axios({
      url: "/category",
    }).then((res) => {
      console.log(res);

      res.data.data.splice(0, 2);
      this.categoryList = res.data.data;
    });
  },
};
</script>

<style lang="less" scoped>
.article_cover {
  width: 100%;
  object-fit: cover;
}
</style>
